

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head th:include="/common/header :: commonHead('商品管理')">




</head>
<body>
 <div id="app">
<el-container>








    <el-main>
        <el-table
                :data="tableData"
                border
                style="width: 100%; min-height: 500px" >

            <el-table-column type="expand">
                <template slot-scope="tableData">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="是否上架"><span>{{ tableData.row.productIsSale }}</span>
                        </el-form-item>
                        <el-form-item label="是否缺货"><span>{{ tableData.row.productIsLack }}</span>
                        </el-form-item>
                        <el-form-item label="排序"><span>{{ tableData.row.productOrder }}</span>
                        </el-form-item>
                        <el-form-item label="入库时间"><span>{{ tableData.row.productDateTime }}</span>
                        </el-form-item>
                        <el-form-item>
                            <span>
                            <img  v-bind:src="web_static_server+tableData.row.productPhoto" alt="">

                            </span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>

            <el-table-column
                    prop="productCode"
                    label="条形码"
                    width="150">
            </el-table-column>


            <el-table-column 
                    prop="productName"
                    label="商品名称"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="productSmallUnit"
                    label="小单位"
                    >
            </el-table-column>

            <el-table-column
                    prop="productSmallPrice"
                    label="价格"
                    >
            </el-table-column>
            <el-table-column
                    prop="productLargerUnit"
                    label="大单位"
                    >
            </el-table-column>

            <el-table-column
                    prop="productLargerPrice"
                    label="价格"
                    >
            </el-table-column>

            <el-table-column
                    prop="productStandard"
                    label="规格"
                    >
            </el-table-column>
            <el-table-column
                    prop="category.categoryName"
                    label="类别"  width="100" >

            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">作废</el-button>
                </template>
            </el-table-column>
        </el-table>



        <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page.sync="pageNum"
                :page-size="100"
                layout="total, prev, pager, next"
                :total="total">
        </el-pagination>

    </el-main>

</el-container>
</div>
</body>




<script>

    var vue =new Vue({
        el: '#app',
        data:{
            tableData: '',
            pageNum:1,
            pageSize:8,
            total:0,
            web_static_server:_global_web_server+"/static/"


        },
        methods:{
            init:function () {
                var url=_global_web_server +"/product/list";
                var _self=this;
                axios.get(url,{
                    params:{
                        pageNum:_self.pageNum,
                        pageSize:_self.pageSize
                    }
                }).then(function (response) {
                    var  jsonResult=response.data;
                    var  pageInfo =jsonResult.data;
                    _self.tableData=pageInfo.list;
                    _self.total=pageInfo.total;

                }).catch(function (reason) {
                    console.log(reason);
                });
            },
            handleCurrentChange:function (value) {
                this.pageNum=value;
                this.init();

            },
        }
    })
    vue.init();


</script>
</html>